<template>
    <view class="left-15 right-15 navsWrap flex">
        <block v-for="(navItem, index) in navs" :key="index">
            <view class="navItem text-center font13" @click="navRoute(navItem)">
                <image class="navImage bottom-5" :src="navItem.image" mode="heightFix"></image>
                <view>{{navItem.name}}</view>
            </view>
        </block>
    </view>
</template>

<script>
	export default {
        data() {
        	return {
                navs: [{
                   name: '地图找房',
                   image: 'https://image.srea.org.cn/xcx/icon/icon-home-menu-hot.png',
                   path: '/pages/products/map/index',
                   type: 'map'
                },{
                   name: '地铁找房',
                   image: 'https://image.srea.org.cn/xcx/icon/icon-home-menu-hot.png',
                   path: '/pages/products/metro/index',
                   type: 'metro'
                },{
                   name: '环线找房',
                   image: 'https://image.srea.org.cn/xcx/icon/icon-home-menu-hot.png',
                   path: '/pages/products/huan-xian/index',
                   type: 'huanXian'
                },{
                   name: 'VR看房',
                   image: 'https://image.srea.org.cn/xcx/icon/icon-home-menu-hot.png',
                   path: '/pages/products/vr/index',
                   type: 'vr'
                },{
                   name: '视频看房',
                   image: 'https://image.srea.org.cn/xcx/icon/icon-home-menu-hot.png',
                   path: '/pages/products/video/index',
                   type: 'shipin'
                }]
        	}
        },
		methods:{
            //点击Navs
            navRoute(info){
                uni.navigateTo({
                	url: `${info.path}?pageType=${info.type}&type=${info.type}`
                })
            }
		}
	}
</script>

<style scoped lang="scss">
    .navsWrap{
        justify-content: space-between;
        .navItem{
            width: 20%;
            display: inline-block;
            .navImage{
                height: 70rpx;
                width: 70rpx;
            }
        }
    }
</style>
